<template>

	<el-container>

		<!-- 左侧筛选搜索 -->
		<el-aside width="200px">
			<!-- 推荐及重置按钮 -->
			<div class="header">
				<h3>推荐</h3>
				<el-button size='small' @click="reset">重置</el-button>
			</div>
			<hr>
			<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
				<el-submenu index="1">
					<template slot="title">
						<!-- <i class="el-icon-location"></i> -->
						<span>性别</span>
					</template>
					<el-menu-item index="1">男</el-menu-item>
					<el-menu-item index="2">女</el-menu-item>
					<el-menu-item index="3">中</el-menu-item>
					<el-menu-item index="4">中年</el-menu-item>
				</el-submenu>
				<hr>
				<el-submenu index="2">
					<template slot="title">
						<!-- <i class="el-icon-location"></i> -->
						<span>大类</span>
					</template>
					<el-menu-item index="1">服装</el-menu-item>
					<el-menu-item index="2">配件</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-aside>
		<!-- 右侧所有商品 -->
		<el-main>
			<!-- header -->
			<div class="top">
				<!-- 左侧 -->
				<div>
					<p>所有商品( <span>{{num}}</span> )</p>
				</div>
				<!-- 右侧下拉框 -->
				<div>
					<el-select v-model="value" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
			</div>
			<!-- 分页 -->
			<div class="avue-crud__pagination">
				<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
					:current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
					background layout="total, sizes, prev, pager, next, jumper">
				</el-pagination>
			</div>
			<!-- 商品 -->
			<div class="shops">
				<div v-for="item in dataList" @mouseenter='getShop' @mouseleave='getToShop'>
					<img class="img1" :src="item.src" alt="">
					<p>{{item.title}}</p>
					<p>{{item.money}}</p>
				</div>
			</div>
		</el-main>
	</el-container>
</template>
<script>
	export default {
		data() {
			return {
				num: 0, //所有商品的个数
				pageIndex: 1, //页数
				pageSize: 10, //条数
				value:'',
				// 所有商品数据
				dataList: [
					{
						src:'/images/big01.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big02.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big03.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big02.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big04.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big03.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big04.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big02.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big01.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big02.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big03.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big01.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big04.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big02.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big03.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big01.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big03.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big01.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big02.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big01.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big03.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big04.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big01.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					},
					{
						src:'/images/big02.jpg',
						title:'【安踏冠军系列】安踏男针...',
						src1:'/images/small01.jpg',
						money:'￥499.99'
					}
					
				],
				// 所有商品头部下拉框
				options: [{
					value: '选项1',
					label: '1'
				}, {
					value: '选项2',
					label: '2'
				}],
				// 分页
				pageIndex: 1,
				pageSize: 10,
				totalPage: 0,
			}
		},
		created() {
		},
		methods: {
			
			handleOpen(){},
			handleClose(){},
			// 重置
			reset() {
				console.log(1111)
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val;
				this.pageIndex = 1;
				this.getDataList();
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageIndex = val;
				this.getDataList();
			},
			getShop(){
				console.log(11111)
			},
			getToShop(){
				console.log(3333)
			}
		}
	}
</script>
<style scoped>
	/* 左侧导航菜单 */
	body {
		box-sizing: border-box;
		margin: 0;
	}

	* {
		user-select: none;
		outline: none;
	}

	.f1 {
		display: flex;
		width: 100%;
		height: 50px;
		margin: 0 !important;
		border-bottom: 1px solid rgb(204, 204, 204);
		align-items: center;
	}

	.f1>.container {

		margin-left: 900px;
	}

	span {
		padding: 5px;
		color: rgb(153, 153, 153);
		font-size: 14px;
	}

	.f2 .car,
	.lang,
	.log,
	.reg,
	.serve:hover {
		cursor: pointer;

	}

	.parent {
		position: relative;

	}

	.f2>.container {
		height: 100px;
		display: flex;
		justify-content: flex-start;
		border-bottom: 1px solid rgb(204, 204, 204);
	}

	.f2>.container>img {
		width: 53px;
		height: 28px;
		padding: 35px;
		margin-right: 20px;
	}

	.f2>.container>span {

		font-size: 17px;
		font-weight: bold;
		color: black;
		padding: 35px 20px;

	}

	.f2>.container>span:hover {
		cursor: pointer;
		border-bottom: 3px solid red;
	}

	.f2>.container>.input {
		display: flex;
		align-items: center;
		border: 1px solid rgb(204, 204, 204);
		margin: 28px 20px;
		width: 212px;
		height: 38px;
		border-radius: 4px;

	}

	.f2>.container>.input>a {
		padding: 10px 0 8px 8px;
	}

	.f2>.container>.input>input {
		width: 100px;
		height: 30px;
		margin-left: 10px;
		padding: 0 10px;
		border-top: none;
		border-right: none;
		border-bottom: none;
		border-left: 1px solid rgb(204, 204, 204);

	}

	.detail1 {
		justify-content: center;
		/* border: 1px solid rgb(204,204,204); */
		position: absolute;
		top: 150px;
		left: 20%;
		width: 60%;
		height: 400px;
		margin: 30px;
		display: none;
	}

	.detail1>div {
		width: 22%;
		height: 400px;
		border-left: 1px solid rgb(204, 204, 204);
		font-size: 0.8em;
		font-weight: bold;
	}

	.detail2 {
		justify-content: center;
		/* border: 1px solid rgb(204,204,204); */
		position: absolute;
		top: 150px;
		left: 20%;
		width: 60%;
		height: 400px;
		margin: 30px;
		display: none;
	}

	.detail2>div {
		width: 30%;
		height: 400px;
		border-left: 1px solid rgb(204, 204, 204);
		font-size: 0.8em;
		font-weight: bold;
	}

	.detail3 {
		justify-content: center;
		/* border: 1px solid rgb(204,204,204); */
		position: absolute;
		top: 150px;
		left: 20%;
		width: 60%;
		height: 400px;
		margin: 30px;
		display: none;
	}

	.detail3>div {
		width: 22%;
		height: 400px;
		border-left: 1px solid rgb(204, 204, 204);
		font-size: 0.8em;
		font-weight: bold;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 5%;
		box-sizing: border-box;
	}

	.el-menu {
		border: none;
	}

	hr {
		color: #ccc;
		width: 90%;
	}

	/* 分页 */
	.el-pagination {
		float: right;
	}

	/* 右侧所有商品 */
	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.shops{
		display: flex;
		flex-wrap: wrap;
		margin: 40px 20px 0;
	}
	.shops>div{
		width: 220px;
		height: 280px;
		margin-left: 30px;
	}
	.shops>div>.img1{
		width: 220px;
		height: 220px;
	}
	.shops>div>p{
		font-size: 16px;
		margin: 0;
	}
</style>
